<template>
<view style="background-color:#F5F5F5;  width: 100%;
	display: flex;
	
	align-items: center;
	flex-direction: column;
	">
<view >
<view class="order">
	<view class="ordercode">
		<text style="font-size: 15px; font-weight:500;margin-left: 15px;">订单号：{{list.orderCode}}</text>
		<text style="font-size: 15px; font-weight:500;margin-right: 15px;color: #042A58;">
			<text v-if="list.driverstatus==0">无状态</text>
			<text v-if="list.driverstatus==1">未接单</text>
			<text v-if="list.driverstatus==2">已接单</text>
			<text v-if="list.driverstatus==3">已发车</text>
			<text v-if="list.driverstatus==4">已完成</text>
			<text v-if="list.driverstatus==5">已回单</text>
			<text v-if="list.driverstatus==6">拒单</text>
			<text v-if="list.driverstatus==7">已取消</text>
		</text>
	</view>
	<view class="orders">
		<view style="display: flex; margin-left: 15px;">
			<view class="ordernum">
				承运人:{{list.contactname}}
			</view>
			<view class="ordernum" style="margin-left: 5px;">
				{{list.contacttel}}
			</view>
		</view>
		<view style="margin-right: 15px; font-size: 13px; color: #4A4A4A;">
			接单情况:
			<text v-if="list.driverstatus==0">无状态</text>
			<text v-if="list.driverstatus==1">未接单</text>
			<text v-if="list.driverstatus==2">已接单</text>
			<text v-if="list.driverstatus==3">已发车</text>
			<text v-if="list.driverstatus==4">已完成</text>
			<text v-if="list.driverstatus==5">已回单</text>
			<text v-if="list.driverstatus==6">拒单</text>
			<text v-if="list.driverstatus==7">已取消</text>
		</view>
	</view>
	<view class="address">
		<view class="addresscar" >
			<view class="" style="width: 34px; height: 14px;">
				<image src="../../static/img/icon_dingwei.png" mode=""
			style="width: 14px; height: 14px; margin-left: 15px;"
			></image>
			</view>
			<view style=" margin-left: 5px;" >
				<text>装货地：{{list.sendAddress}}</text>
			</view>
			
		</view>
		<view class="addresscar">
			<view class=""  style="width: 34px; height: 14px;">		
			<image src="../../static/img/icon_zdz@2x.png" mode=""
			style="width: 18px; height: 9px; margin-left: 13px"
			></image>
			</view>
			<view  style=" margin-left: 5px;">
				<text>卸货地：{{list.receiveAddress}}</text>
			</view>
			
		</view>
	</view>

</view>
<view class="orderdetail">
	<view class="ordercode" >
		<text style="font-size: 15px; font-weight:500;margin-left: 15px;">货物信息</text>
		<view class="ordermoney">
			总运费:{{jisuweight|addZero}}元	
		</view>
	</view>
	<view class="ordercodes" >
		<view style="margin-left: 15px;font-size: 13px; color: #4A4A4A;">
			单价：{{list.unitPrice}}元/{{add[0].weightName}}
		</view>
		<view style="margin-right: 15px;font-size: 13px; color: #4A4A4A;">
			数量:
				<text>{{add[0].weightName}}</text> 
		</view>
	</view>
	<view class="ordercodes">
		<view style="margin-left: 15px;font-size: 13px; color: #4A4A4A;"  v-show="add[0].name!='请选择货物类型'">
			货物类型：{{add[0].name}}
		</view>
	</view>
</view>
<view style="width: 100%;background-color: #FFFFFF;margin-top: 10px;padding-bottom: 30rpx;" v-if="home.length!=0">
		<view style="font-size: 15px;color: #000000;margin-left: 15px;height: 45px;display: flex;align-items: center;">
			<text >回单信息</text>
		</view>
		<view  v-for="(v,i) in home" :key="i" @click="imed(i)">
			<view style="height: 136px; background-color: #FFFFFF;display: flex;align-items: center;justify-content: center;overflow: hidden;margin-top: 10px;">
					<image :src="getImgUrl(v.reportFilePath)" mode="" style="margin-top: 10px;width: 50%;height: 300%;" ></image>
			</view>
		
		</view>
		
</view>

	<button style="
	width:345px;
	height:44px;
	background:rgba(218,224,231,1);
	border-radius:8px;
	color: #042A58;
	margin-top: 62px;
	" @click="end">取消订单</button>

</view>
	<view class="mask" v-show="maskd" >
		           <movable-area scale-area  style="height: 100%;width: 100%;">
		                <movable-view direction="all" @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="scale"  style="height: 100%;width: 100%;">
		                			<image :src="inde" mode="widthFix" style="height: 100%;width: 100%;" @click="inder" ></image>
		                </movable-view>
		            </movable-area>
	</view>
</view>

</template>

<script>


export default {

  data () {
    return {
		maskd:false,
		list:[],
		add:[],
		optin:"",
		home:"",
		inde:""
		
    }
  },
  // 分享
  onShareAppMessage: function( options ){
  　　var that = this;
  　　// 设置菜单中的转发按钮触发转发事件时的转发内容
  　　var shareObj = {
  　　　　title: "优货达货主",        // 默认是小程序的名称(可以写slogan等)
  　　　　path: '',        // 默认是当前页面，必须是以‘/’开头的完整路径
  　　　　imageUrl:"../../static/img/fenxiang.png",     //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图.显示图片长宽比是 5:4
  　　};
  　　// 返回shareObj
  　　return shareObj;
  },
  onLoad(option) {

  			var that=this
			
  			var that=this
  				var header;
  							  header = { 
  				
  				     'content-type': 'application/x-www-form-urlencoded', 
  				
  				     'cookie':uni.getStorageSync("sessionid")//读取cookie
  				
  				  };
  				 uni.request({
  				      url: "https://www.uhuoda.com/v1/order/info/"+option.id,
  						method:"get",
  				      header: header,//传在请求的header里			  
  				      success(res) {
						  console.log(res.data.message)
						  that.home=res.data.message.orderSigninFiles
  						that.list=res.data.message
						
							that.add=JSON.parse(res.data.message.goodsjson)
					
  				      //请求成功的处理
  				      },
  					
  				    })
  			
  		},
		computed:{
		  	jisuweight(){
		  		return this.list.totalPrice/(94/100)
		  	}
		  },
		filters:{
					 addZero(data){
						 return Math.ceil(data.toFixed(3)*100)/100
					 }
		},
		
  methods: {
	  	getImgUrl(icon){
	  		   return "https://www.uhuoda.com/"+icon;
	  		},
			get(icon){
				   return "https://www.uhuoda.com/"+icon;
				},
				inder(){
					this.maskd=false
				},
			imed(i){
				this.maskd=true
				this.inde="https://www.uhuoda.com/"+this.home[i].reportFilePath
			},
end(){
	uni.showModal({				
	    content: '请您确认是否取消订单？',						
	    success: function (res) {					
	      if (res.confirm) {//这里是点击了确定以后
		  var that=this
		  	var header;
		  				  header = { 
		  	
		  	     'content-type': 'application/x-www-form-urlencoded', 
		  	
		  	     'cookie':uni.getStorageSync("sessionid")//读取cookie
		  	
		  	  };
		  	 uni.request({
		  	      url: "https://www.uhuoda.com/v1/order/chuanHua/order/cancel",
		  			method:"post",
		  			data:{
		  				orderCode:this.list.orderCode
		  			},
		  	      header: header,//传在请求的header里			  
		  	      success(res) {
		  			  console.log(res.data)
		  			  if(res.data.status=="OK"){
		  				  uni.navigateBack({
		  				  	url: '../Order/Order'
		  				  });
		  			  }else{
		  				  uni.showToast({
		  				    title: '删除失败', // 标题
		  				    icon:"none"
		  				  })
		  			  }
		  	      },
		  		
		  	    })
	      } else {//这里是点击了取消以后
	      }					
	    }.bind(this)					
	  })
}
  }
}
</script>

<style>
	.mask{
		width: 100%;
		height:667px;
		position:fixed;
		background: rgba(0,0,0,0.4);
			display: flex;
		align-items: flex-end;
	}
	.detail{
		width:325px;
		height:147px;
		background:rgba(240,240,240,1);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 15px;
	}
.order{
	width:355px;
	height:142px;
	background:rgba(255,255,255,1);
	border-radius:8px;
	margin-top: 10px;
}
.ordercode{
	height: 39px;
	display: flex;
	border-bottom: 1px solid #F5F5F5;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}
.orders{
	width:100% ;
	height: 46px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
}
.ordernum{
	height: 25px;
	padding: 6px;
	background:rgba(242,243,246,1);
	border-radius:4px;
	text-align: center;
	line-height: 25px;
	font-size: 13px;
	color: #042A58;
}
.address{
	height: 52px;
	display: flex;
	flex-direction: column;
	font-size:12px;
	font-weight: 400;
	
}
.addresscar{
	margin-top: 6px;
	display: flex;
	height: 13px;
}
.orderdetail{
	width:355px;
	height:105px;
	background:rgba(255,255,255,1);
	border-radius:8px;
	margin-top: 10px;
}
.ordercodes{
	height: 25px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	}
	.Remarks{
		width:325px;
		height:80px;
		background:rgba(242,243,246,1);
		border-radius:8px;
		margin-top: 15px;
		margin-left: 15px;
	}
	.ordermoney{
		font-weight:500;
		color:rgba(254,7,0,1);
		margin-right: 15px;
		text-align: right;
	}
</style>